{% extends "base.html" %}

{% block title %}交易记录 - 交易监控系统{% endblock %}

{% block content %}
<div class="page-header">
    <h1>交易记录</h1>
</div>

<div class="card">
    <div class="card-header">
        <h2>搜索条件</h2>
    </div>
    <div class="card-body">
        <form onsubmit="return trimFormInputs()" action="/trade_records" method="get" class="search-form">
            <div class="form-group">
                <label for="product_name">品种名称</label>
                <input type="text" id="product_name" name="product_name" class="form-control" value="{{ product_name or '' }}" oninput="this.value = this.value.trim()">
            </div>
            
            <div class="form-group">
                <label for="direction">方向</label>
                <select id="direction" name="direction" class="form-control">
                    <option value="">全部</option>
                    <option value="BUY" {% if direction == 'BUY' %}selected{% endif %}>买入</option>
                    <option value="SELL" {% if direction == 'SELL' %}selected{% endif %}>卖出</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="offset">开平</label>
                <select id="offset" name="offset" class="form-control">
                    <option value="">全部</option>
                    <option value="OPEN" {% if offset == 'OPEN' %}selected{% endif %}>开仓</option>
                    <option value="CLOSE" {% if offset == 'CLOSE' %}selected{% endif %}>平仓</option>
                    <option value="CLOSETODAY" {% if offset == 'CLOSETODAY' %}selected{% endif %}>平今</option>
                </select>
            </div>
            
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-search"></i> 搜索
            </button>
        <script>
function trimFormInputs() {
  const inputs = document.querySelectorAll('input[type="text"]');
  inputs.forEach(input => {
    input.value = input.value.trim();
  });
  return true;
}
</script>
</form>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h2>交易记录列表</h2>
    </div>
    <div class="card-body">
        <div class="table-container">
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>品种名称</th>
                        <th>方向</th>
                        <th>开平</th>
                        <th>数量</th>
                        <th>价格</th>
                        <th>原因</th>
                        <th>交易时间</th>
                        <th>记录时间</th>
                    </tr>
                </thead>
                <tbody>
                    {% for record in records %}
                    <tr>
                        <td>{{ record.id }}</td>
                        <td>{{ record.product_name }}</td>
                        <td>
                            {% if record.direction == 'BUY' %}
                            <span class="badge badge-success">买入</span>
                            {% else %}
                            <span class="badge badge-danger">卖出</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if record.offset == 'OPEN' %}
                            <span class="badge badge-primary">开仓</span>
                            {% elif record.offset == 'CLOSE' %}
                            <span class="badge badge-warning">平仓</span>
                            {% elif record.offset == 'CLOSETODAY' %}
                            <span class="badge badge-secondary">平今</span>
                            {% else %}
                            {{ record.offset }}
                            {% endif %}
                        </td>
                        <td>{{ record.volume }}</td>
                        <td>{{ record.price }}</td>
                        <td>{{ record.reason }}</td>
                        <td>{{ record.timestamp }}</td>
                        <td>{{ record.created_at }}</td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="9" style="text-align: center;">暂无交易记录</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        <!-- 分页 -->
        {% if total_pages > 1 %}
        <div class="pagination">
            {% if page > 1 %}
            <a href="/trade_records?page={{ page - 1 }}&limit={{ limit }}{% if product_name %}&product_name={{ product_name }}{% endif %}{% if direction %}&direction={{ direction }}{% endif %}{% if offset %}&offset={{ offset }}{% endif %}">
                <i class="fas fa-chevron-left"></i> 上一页
            </a>
            {% endif %}
            
            {% for p in range(1, total_pages + 1) %}
            {% if p == page %}
            <span class="active">{{ p }}</span>
            {% elif p == 1 or p == total_pages or (p >= page - 2 and p <= page + 2) %}
            <a href="/trade_records?page={{ p }}&limit={{ limit }}{% if product_name %}&product_name={{ product_name }}{% endif %}{% if direction %}&direction={{ direction }}{% endif %}{% if offset %}&offset={{ offset }}{% endif %}">{{ p }}</a>
            {% elif p == page - 3 or p == page + 3 %}
            <span>...</span>
            {% endif %}
            {% endfor %}
            
            {% if page < total_pages %}
            <a href="/trade_records?page={{ page + 1 }}&limit={{ limit }}{% if product_name %}&product_name={{ product_name }}{% endif %}{% if direction %}&direction={{ direction }}{% endif %}{% if offset %}&offset={{ offset }}{% endif %}">
                下一页 <i class="fas fa-chevron-right"></i>
            </a>
            {% endif %}
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}